<template>
	<u-popup :show="show" @close="show = false" bgColor="transparent">
		<view class="confirm-pop">
			<view class="date-select">
				<view class="title-box">
					<view class="title">请选择预约日期</view>
					<view class="tip">*可左滑动选择其他时间</view>
				</view>
				<view class="scroll-wrap">
					<scroll-view scroll-x="true"
						style="white-space: nowrap;width: 100%;height: 103rpx;position: relative;">
						<view class="list">
							<view class="item" v-for="(item, i) in 5" :key="i">
								<view class="time">10-12</view>
								<view class="day">今天</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			
			<view class="date-select top">
				<view class="title-box">
					<view class="title">请选择预约时间段</view>
				</view>
				<view class="column-wrap">
					<scroll-view scroll-y="true"
						style="width: 100%;height: 280rpx;">
						<view class="column">
							<view class="item" v-for="(item, i) in 15" :key="i">
								<view class="disabled default active">当前两小时</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			
			<view class="top">
				<u-button throttleTime="1000" color="#05C160">确定</u-button>
			</view>
		</view>
	</u-popup>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	const show = ref(false)
	defineExpose({
		show
	})
</script>

<style lang="scss" scoped>
	.title {
		color: #000000;
		font-size: 40rpx;
		// font-weight: bold;
	}

	.confirm-pop {
		background: #FFFFFF;
		border-radius: 27rpx 27rpx 0rpx 0rpx;
		padding: 32rpx 26rpx;

		.date-select {
			.title-box {
				@include flex-between(100%);

				.tip {
					color: #1ED899;
					font-size: 28rpx;
				}
			}

			.scroll-wrap {
				margin-top: 32rpx;
				height: 102rpx;
				.list {
					display: flex;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 99;
					.item {
						@include flex-center(207rpx, 103rpx);
						flex-direction: column;
						background: #F6F6F6;
						border-radius: 7rpx;
						color: #000000;
						font-size: 26rpx;
						margin-right: 30rpx;
					
						.day {
							margin-top: 6rpx;
						}
					}
				}
			}
			.column-wrap {
				margin-top: 32rpx;
				.column {
					@include flex-between();
					flex-wrap: wrap;
					.item {
						@include flex-center(320rpx, 80rpx);
						background: #F6F6F6;
						font-size: 26rpx;
						margin-bottom: 14rpx;
						.disabled {
							color: #CFCFCF;
						}
						.default {
							color: #000000;
						}
						.active {
							color: #05C160;
						}
						
					}
				}
			}
		}
	}
	.top {
		margin-top: 34rpx;
	}
</style>